<template>
	<view id="index">
		<view class=header-box>
			<!-- 顶部轮播图 -->
			<swiper class="swiper" :indicator-dots="false" :autoplay="true" :interval="2500" :duration="500">
				<swiper-item v-for="(item,index) in swiperAdlist" :key="index">
					<image class="banner-swiper-img" :src="item" mode="aspectFill" />
				</swiper-item>
			</swiper>
		</view>
		<view class="content">
			<image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				swiperAdlist: [
					'/static/xinghua.png',
					'/static/xinghua.png',
					'/static/xinghua.png',
				]
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	#sns {
		background-color: #f1f1f1;
	}

	.header-box {
		position: relative;
		 width: 100%;          /* 确保宽度占满父容器 */
		  height:  300rpx;       /* 建议改用 rpx 替代 upx */
		  background-color: #f1f1f1;
		  overflow: hidden;     /* 隐藏溢出部分 */
}
		.swiper {
			 width: 100%;          /* 宽度铺满父容器 */
			  height: 100%;         /* 高度铺满父容器 */
         }
			.banner-swiper-img {
				 width: 100%;          /* 图片宽度铺满 */
				  height: 100%;         /* 图片高度铺满 */
				  display: block;       /* 消除图片默认间隙 */
				  object-fit: cover;    /* 关键：保持比例并铺满容器 */
			}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}



	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>